<template>
    <el-popover placement="bottom-start" title="添加流程节点" width="370px" trigger="click" @before-enter="click">
        <div class="node-select">
        <div @click="addApprovalNode">
            <el-icon style="color: rgb(255, 148, 62)"><Stamp /></el-icon>
            <span>审批人</span>
        </div>
        <div @click="addCcNode">
            <el-icon style="color: rgb(50, 150, 250)"><Promotion /></el-icon>
            <span>抄送人</span>
        </div>
        <div @click="addConditionsNode">
            <el-icon style="color: rgb(21, 188, 131)"><Share /></el-icon>
            <span>条件分支</span>
        </div>
        <div @click="addConcurrentsNode">
            <el-icon style="color: #718dff"><Operation /></el-icon>
            <span>并行分支</span>
        </div>
        <div @click="addDelayNode">
            <el-icon style="color: #f25643"><Clock /></el-icon>
            <span>延迟等待</span>
        </div>
        <div @click="addTriggerNode">
            <el-icon style="color: #15bc83"><SetUp /></el-icon>
            <span>触发器</span>
        </div>
        </div>
        <template #reference>
            <el-button :icon="Plus" type="primary" size="default" circle ref="btn"></el-button>
        </template>
    </el-popover>
</template>

<script>
import { Stamp, Promotion, Share, Operation, Clock, SetUp, Plus } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'
import { useWorkFlowConfig } from '/@/stores/workFlow'
import { storeToRefs } from 'pinia'

export default {
    name: 'InsertButton',
    components: {
        Stamp,
        Promotion,
        Share,
        Operation,
        Clock,
        SetUp,
        Plus
    },
    emits: ['insertNode'],
    setup(props, context) {
        const storesWorkFlowConfig = useWorkFlowConfig()
        const workFlowConfig = storeToRefs(storesWorkFlowConfig)
        const btn = ref()
        const selectedNode = computed(() => {
            return workFlowConfig.selectedNode.value
        })
        const addApprovalNode = () => {
            context.emit('insertNode', 'APPROVAL')
        }
        const addCcNode = () => {
            context.emit('insertNode', 'CC')
        }
        const addDelayNode = () => {
            context.emit('insertNode', 'DELAY')
        }
        const addConditionsNode = () => {
            context.emit('insertNode', 'CONDITIONS')
        }
        const addConcurrentsNode = () => {
            context.emit('insertNode', 'CONCURRENTS')
        }
        const addTriggerNode = () => {
            context.emit('insertNode', 'TRIGGER')
        }
        const click = () => {
            console.log(btn)
        }
        return {
            Plus,
            selectedNode,
            addApprovalNode,
            addCcNode,
            addDelayNode,
            addConditionsNode,
            addConcurrentsNode,
            addTriggerNode,
            click,
            btn
        }
    }
}
</script>

<style lang="scss" scoped>
.node-select {
  div {
    display: inline-flex;
    align-items: center;
    margin: 5px 5px;
    cursor: pointer;
    padding: 10px 15px;
    border: 1px solid #f8f9f9;
    background-color: #f8f9f9;
    border-radius: 10px;
    width: 162px;
    position: relative;
    span {
      position: absolute;
      left: 65px;
      top: 18px;
    }
    &:hover {
      background-color: #fff;
      box-shadow: 0 0 8px 2px #d6d6d6;
      transition: box-shadow 0.3s;
    }
    :deep(.el-icon) {
      font-size: 35px;
      padding: 5px;
      border: 1px solid #dedfdf;
      border-radius: 14px;
    }
  }
}
</style>